<script setup lang="ts">
  import { defineComponent, h } from 'vue'
  import {
    NDialogProvider,
    NLoadingBarProvider,
    NMessageProvider,
    NNotificationProvider,
    NConfigProvider,
    useDialog,
    useLoadingBar,
    useMessage,
    useNotification,
    zhCN,
    type GlobalThemeOverrides,
  } from 'naive-ui'

  // 自定义主题配置
  const themeOverrides: GlobalThemeOverrides = {
    common: {
      primaryColor: '#0B5CFF', // 你的主色调
      primaryColorHover: '#0B5CFFE6', // hover 状态
      primaryColorPressed: '#0B5CFFCC', // 按下状态
      primaryColorSuppl: '#0B5CFF', // 补充色
    },
    Button: {
      // 按钮相关配置
      textColor: '#0B5CFF',
      textColorHover: '#0B5CFFE6',
      textColorPressed: '#0B5CFFCC',
      textColorFocus: '#0B5CFF',
      textColorDisabled: '#0B5CFF66',
      borderHover: '1px solid #0B5CFFE6',
      borderPressed: '1px solid #0B5CFFCC',
      borderFocus: '1px solid #0B5CFF',
      borderDisabled: '1px solid #0B5CFF66',
      colorHover: '#0B5CFF0A',
      colorPressed: '#0B5CFF14',
      colorFocus: '#0B5CFF0A',
      colorDisabled: '#0B5CFF0A',
      rippleColor: '#0B5CFF',
    },
    Input: {
      // 输入框相关配置
      borderHover: '1px solid #0B5CFF',
      borderFocus: '1px solid #0B5CFF',
      boxShadowFocus: '0 0 0 2px #0B5CFF1A',
    },
    Select: {
      // 选择器相关配置
      peers: {
        InternalSelection: {
          borderHover: '1px solid #0B5CFF',
          borderActive: '1px solid #0B5CFF',
          boxShadowFocus: '0 0 0 2px #0B5CFF1A',
        },
      },
    },
    Menu: {
      // 菜单相关配置
      itemTextColorActive: '#0B5CFF',
      itemTextColorHover: '#0B5CFF',
      itemColorActive: '#0B5CFF0A',
      itemColorActiveHover: '#0B5CFF14',
    },
    Tabs: {
      // 标签页相关配置
      tabTextColorActive: '#0B5CFF',
      tabTextColorHover: '#0B5CFF',
      barColor: '#0B5CFF',
    },
  }

  function registerNaiveTools() {
    window.$loadingBar = useLoadingBar()
    window.$dialog = useDialog()
    window.$message = useMessage()
    window.$notification = useNotification()
  }

  const NaiveProviderContent = defineComponent({
    name: 'NaiveProviderContent',
    setup() {
      registerNaiveTools()
    },
    render() {
      return h('div')
    },
  })
</script>

<template>
  <NConfigProvider :theme-overrides="themeOverrides" :locale="zhCN">
    <NLoadingBarProvider>
      <NDialogProvider>
        <NNotificationProvider>
          <NMessageProvider>
            <slot />
            <NaiveProviderContent />
          </NMessageProvider>
        </NNotificationProvider>
      </NDialogProvider>
    </NLoadingBarProvider>
  </NConfigProvider>
</template>
